<script setup>
import { ref, onMounted } from 'vue';
import tarbar from '@/layout/tarbar/tarbar.vue';
import navbar from '@/layout/header/navbar.vue';
import { getClusterList, createCluster, updateCluster, deleteCluster } from '@/api/cluster';
import { showConfirmDialog } from 'vant';

// 集群列表
const clusters = ref([]);
// 是否显示添加集群对话框
const showAddClusterDialog = ref(false);
// 是否显示编辑集群对话框
const showEditClusterDialog = ref(false);

// 添加集群的数据
const newCluster = ref({
  clusterName: '',
  url: '',
  token: '',
  version: '',
  type: '',
});

// 编辑集群的数据
const editCluster = ref({
  id: '',
  clusterName: '',
  url: '',
  token: '',
  version: '',
  type: '',
});

// 获取集群列表
async function fetchClusters() {
  try {
    clusters.value = await getClusterList();
  } catch (error) {
    console.error('获取集群列表失败:', error);
  }
}

// 挂载时获取集群列表
onMounted(fetchClusters);

// 显示添加集群对话框
function handleAddClusterClick() {
  showAddClusterDialog.value = true;
}

// 提交添加集群表单
async function submitAddClusterForm() {
  try {
    await createCluster(newCluster.value);
    // 关闭对话框
    showAddClusterDialog.value = false;
    // 清空表单
    newCluster.value = {
      clusterName: '',
      url: '',
      token: '',
      version: '',
      type: '',
    };
    // 刷新集群列表
    fetchClusters();
  } catch (error) {
    console.error('创建集群失败:', error);
  }
}

// 打开编辑集群对话框
function handleEditClusterClick(cluster) {
  editCluster.value = { ...cluster };
  showEditClusterDialog.value = true;
}

// 提交编辑集群表单
async function submitEditClusterForm() {
  try {
    await updateCluster(editCluster.value.id,editCluster.value);
    // 关闭对话框
    showEditClusterDialog.value = false;
    // 刷新集群列表
    fetchClusters();
  } catch (error) {
    console.error('更新集群失败:', error);
  }
}

// 删除集群
async function handleDeleteClusterClick(clusterId) {
  try {
    await deleteCluster(clusterId);
    // 刷新集群列表
    fetchClusters();
  } catch (error) {
    console.error('删除集群失败:', error);
  }
}
</script>

<template>
  <navbar/>
  <div>
    <van-cell title="集群管理" is-link @click="handleAddClusterClick">
      <template #right-icon>
        <van-button round type="primary" size="small">添加集群</van-button>
      </template>
    </van-cell>
    <van-grid square :column-num="2">
      <van-grid-item v-for="(cluster, index) in clusters" :key="index">
        <van-icon name="cluster-o" size="1.5rem"/>
        <text style="font-size: 0.5rem;">{{ cluster.clusterName }}</text>
        <van-button round type="warning" size="small" @click="handleEditClusterClick(cluster)">修改配置</van-button>
        <van-button round type="danger" size="small" @click="handleDeleteClusterClick(cluster.id)">删除集群</van-button>
      </van-grid-item>
    </van-grid>
  </div>
  <tarbar/>

  <!-- 添加集群对话框 -->
  <van-dialog
    v-model:show="showAddClusterDialog"
    title="添加集群"
    show-cancel-button
    @confirm="submitAddClusterForm"
  >
    <van-field
      v-model="newCluster.clusterName"
      label="集群名称"
      placeholder="请输入集群名称"
      required
    />
    <van-field
      v-model="newCluster.url"
      label="URL"
      placeholder="请输入URL"
      required
    />
    <van-field
      v-model="newCluster.token"
      label="Token"
      placeholder="请输入Token"
      required
    />
    <van-field
      v-model="newCluster.version"
      label="版本"
      placeholder="请输入版本"
      required
    />
    <van-field
      v-model="newCluster.type"
      label="类型"
      placeholder="请输入类型"
      required
    />
  </van-dialog>

  <!-- 编辑集群对话框 -->
  <van-dialog
    v-model:show="showEditClusterDialog"
    title="编辑集群"
    show-cancel-button
    @confirm="submitEditClusterForm()"
  >
    <van-field
      v-model="editCluster.clusterName"
      label="集群名称"
      placeholder="请输入集群名称"
      required
    />
    <van-field
      v-model="editCluster.url"
      label="URL"
      placeholder="请输入URL"
      required
    />
    <van-field
      v-model="editCluster.token"
      label="Token"
      placeholder="请输入Token"
      required
    />
    <van-field
      v-model="editCluster.version"
      label="版本"
      placeholder="请输入版本"
      required
    />
    <van-field
      v-model="editCluster.type"
      label="类型"
      placeholder="请输入类型"
      required
    />
  </van-dialog>
</template>

<style scoped>
/* 你的样式 */
</style>